<template>
	<div class="result-item" :class="typeis=='report'?'report-div':''">
		<span class="abs valid" v-if="valid" v-text="valid=='N'?'已失效':''"></span>
		<h3 v-if="typeis=='report'">评价报告</h3>
		<h4 class="brand" v-text="detailObj.INSURANCE_COMPANY"></h4>
		<h4 class="name break" v-text="detailObj.PRODUCT_NAME" :class="detailObj.PRODUCT_NAME.length>17?'shrinker':detailObj.PRODUCT_NAME.length>12?'shrink':''"></h4>
		<p v-if="typeis!='report'">
		<span v-text="detailObj.MAJOR_NUM"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span v-text="detailObj.MAJOR_CLAIM_TIMES"></span>
		</p>
		<p class="report-desc" v-else>
			通过“揭黑”挖出条款中存在的各种坑，<br/>通过“亮点”展示给您更清楚的认识。
		</p>
		<button class="icon icon-fav" @click.stop="favOrNot()" v-if="typeis!='report'">
			<span class="star" :class="detailObj.IS_COLLECTION=='Y'?'fav':detailObj.IS_COLLECTION=='N'?'':''"></span><span class="text text1"><span v-text="detailObj.IS_COLLECTION=='Y'?'已':''"></span>收藏</span>
		</button>
		<button class="icon icon-report" @click.stop="goToPreReport(detailObj.ID)" v-if="typeis=='' || typeis=='collection'">
			<span class="report"></span><span class="text text2">生成报告</span>
		</button>
		<button class="icon icon-evaluation" @click.stop="goToEvaluation(detailObj.ID)" v-if="typeis=='report'">
			<span class="evaluation"></span><span class="text text3">综合评价</span>
		</button>
		<div class="canvas-wrap abs">
			<div class="rel">
				<canvas ref="canvas" :width="width" :height="width" style="transform: rotate(-90deg);"></canvas>
				<span v-text="maxRank"></span><span style="display: inline-block; font-size: 0.2rem; padding-left: 0.02rem;">分</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'search-result',
		props: ['detail','type','isValid'],
		data(){
			return {
				typeis: this.type||'',
				valid:this.isValid||null,
				width: 100,
				angle: 0,
				req: null,
				rank: 0
			}
		},
		computed: {
			ctx(){
				return this.$refs.canvas.getContext("2d");
			},
			detailObj(){
				return this.detail;
			},
			maxAngle(){
				return this.detail.PRODUCT_SCORE*2*Math.PI/100;
			},
			step(){
				return this.detail.PRODUCT_SCORE*2*Math.PI/100/60;
			},
			maxRank(){
				return this.detail.PRODUCT_SCORE;
			},
			rankStep(){
				return this.detail.PRODUCT_SCORE/60;
			}
		},
		methods: {
			getRandomNum: function(){
				let num=~~(Math.random()*100000);
				this.num=num;
			},
			getRem: function(){
				this.width=1.2*parseInt(document.getElementsByTagName('html')[0].style.fontSize);
			},
			drawCircle: function(){
				let ctx=this.ctx;
				ctx.clearRect(0,0,this.width,this.width);
				ctx.beginPath();
				ctx.lineWidth=4;
				ctx.strokeStyle = 'rgba(255,255,255,0.5)';
				ctx.arc(this.width/2,this.width/2,this.width/2-4,0,2*Math.PI);
				ctx.stroke();
			},
			drawArc: function(){
				let ctx=this.ctx;
				ctx.clearRect(0,0,this.width,this.width);
				ctx.beginPath();
				ctx.lineWidth=6;
				ctx.strokeStyle = '#7efd95';
				ctx.arc(this.width/2,this.width/2,this.width/2-4,0,this.maxAngle);
				ctx.stroke();
				ctx.beginPath();
				ctx.lineWidth=6;
				ctx.strokeStyle = 'rgba(255,255,255,0.5)';
				ctx.arc(this.width/2,this.width/2,this.width/2-4,this.maxAngle,2*Math.PI);
				ctx.stroke();
			},
			drawArc1: function(){
				let ctx=this.ctx;
				ctx.clearRect(0,0,this.width,this.width);
				ctx.beginPath();
				ctx.lineWidth=6;
				ctx.strokeStyle = '#7efd95';
				ctx.arc(this.width/2,this.width/2,this.width/2-4,0,this.angle);
				ctx.stroke();
				ctx.beginPath();
				ctx.lineWidth=6;
				ctx.strokeStyle = 'rgba(255,255,255,0.5)';
				ctx.arc(this.width/2,this.width/2,this.width/2-4,this.angle,2*Math.PI);
				ctx.stroke();
				this.angle+=this.step;
				this.rank=~~(this.rank+this.rankStep);
				if(this.angle>=this.maxAngle){
					this.rank=this.maxRank;
					window.cancelAnimationFrame(this.req);
					return;
				}
				this.req = window.requestAnimationFrame(this.drawArc);
			},
			goToPreReport: function(id){
				let search=this.$pages.search;
				if(this.$route.path=='/'){
					// 保存搜索结果页的滚动条位置
					search.divEl=search.$refs.searchContainer;
					search.scrollTop=search.divEl.scrollTop;
				}
				this.$router.push('/pre-report?id='+id);
			},
			goToEvaluation: function(id){
				this.$router.push('/detail?id='+id);
			},
			// 收藏或取消收藏
			favOrNot: function(){
				let that=this;
				let customerId=this.$util.getCustomerId();
				if(!customerId){
					return;
				}
				let insuranceId=this.detailObj.ID;
				let json={
					customerId,
					insuranceId,
					isFavourite: that.detailObj.IS_COLLECTION=='Y'?'N':'Y'
				}
				// 执行收藏或取消收藏操作
				this.$util.ajax('/insurance/favourite','post',json).then(function(res){
					if(res.code=='100000'){
						that.$emit('cancelFavorites',insuranceId);
						that.detailObj.IS_COLLECTION=='Y'?that.detailObj.IS_COLLECTION='N':that.detailObj.IS_COLLECTION='Y';
					} else {
						that.showToast(res.message,'',true)
					}
				})
			}
		},
		mounted(){
			let that=this;
			this.getRem();
			this.$nextTick(this.drawArc1);
		}
	}
</script>

<style scoped>
	.result-item {
		position: relative;
		box-sizing: border-box;
		width: 6.27rem;
		/*height: 2.54rem;*/
		padding: 0.3rem 0.34rem 0.2rem 0.4rem;
		background: url(./image/result-bg.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		color: #fff;
		font-size: 0.2rem;
		margin: 0 auto 0.2rem;
		z-index: 4;
		/*overflow: hidden;*/
	}
	.result-item .valid {
		display: block;
		bottom: 0.12rem;
		right: 0.2rem;
		font-size: 0.24rem;
		color: #ccc;
	}
	.result-item.report-div {
		/*height: 3.44rem;*/
	}
	.result-item h3 {
		text-align: center;
		font-size: 0.32rem;
		margin: 0 0 0.2rem 0;
		color: #e1f5ff;
		padding: 0 0 0.16rem 0;
		border-bottom: 0.01rem solid #559af0;
	}
	.result-item h3 .tail {
		font-weight: normal;
		color: #b5cfff;
		font-size: 0.24rem;
	}
	.result-item h4 {
		margin: 0;
		font-size: 0.32rem;
		font-weight: normal;
	}
	.result-item h4.brand {
		font-size: 0.28rem;
		color: #b5cfff;
		margin-bottom: 0.1rem;
	}
	.result-item h4.name {
		width: 5.7rem;
		margin-bottom: 0.2rem;
	}
	.result-item h4.name.shrink {
		transform-origin: 0 50%;
		transform: scaleX(0.8);
	}
	.result-item h4.name.shrinker {
		transform-origin: 0 50%;
		transform: scaleX(0.75);
	}
	.result-item p {
		margin: 0;
		font-size: 0.24rem;
		line-height: 0.4rem;
		color: #b5cfff;
	}
	.result-item p.report-desc {
		margin-top: -0.1rem;
	}
	.result-item .canvas-wrap {
		width: 1.2rem;
		height: 1.2rem;
		line-height: 1.2rem;
		top: 0.44rem;
		right: 0.3rem;
		text-align: center;
		font-size: 0.36rem;
		color: #7efd95;
	}
	.result-item.report-div .canvas-wrap {
		top: 1.24rem;
	}
	.result-item .canvas-wrap .rel {
		width: 1.2rem;
		height: 1.2rem;
	}
	.result-item .canvas-wrap .rel canvas {
		position: absolute;
		top: 0;
		left: 0;
	}
	button.icon {
		padding: 0.14rem;
		line-height: 0.25rem;
		font-size: 0.24rem;
		color: #ffe373;
		margin-left: -0.14rem;
		margin-right: 0.2rem;
		margin-top: 0.04rem;
		background: none;
		border: none;
		outline: none;
	}
	button.icon.icon-report {
		left: 1.7rem;
	}
	/*button.icon.icon-evaluation {
		left: 0;
	}*/
	span.text {
		padding-left: 0.32rem;
	}
	span.text.text3 {
		padding-left: 0.36rem;
	}
	span.star {
		position: absolute;
		margin-top: -0.03rem;
		display: inline-block;
		width: 0.26rem;
		height: 0.25rem;
		background: url(./image/star.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	span.star.fav {
		background: url(./image/star-fav.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	span.report {
		position: absolute;
		margin-top: -0.02rem;
		margin-left: 0.04rem;
		display: inline-block;
		width: 0.18rem;
		height: 0.24rem;
		background: url(./image/report.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	span.evaluation {
		position: absolute;
		/*margin-top: -0.02rem;*/
		margin-left: 0.04rem;
		display: inline-block;
		width: 0.23rem;
		height: 0.23rem;
		background: url(./image/evaluation.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
</style>